<template>

    <n-grid :cols="12" item-responsive responsive="screen">
        <n-gi span="12 m:8 l:8" offset="0 m:2 l:2">
            <n-card class="proCard bg-gray-100 mb-3 " title="">
                <template #header>
                    <n-page-header @back="handleBack">
                        <template #title>
                            {{discussDetail.theme}}
                        </template>
                    </n-page-header>
                </template>
                <n-layout has-sider style="height:600px" sider-placement="right">

                    <n-layout style="height:600px">
                        <n-layout-content content-style="padding: 24px;height:390px" :native-scrollbar="true">
                            <n-list hoverable clickable :show-divider="false">
                                <n-list-item class=" my-1" v-for="msg in conversationList">
                                    <n-thing title="" content-style="margin-top: 10px;">
                                        <template #description>
                                            <n-space class=" px-2 ">
                                                <n-text>{{ msg.ID + msg.name }}</n-text>
                                                <n-time :time="msg.time * 1000" />
                                            </n-space>
                                        </template>
                                        <n-blockquote class=" p-2 py-3 whitespace-pre-wrap">
                                            {{ msg.msg }}
                                        </n-blockquote>
                                    </n-thing>
                                </n-list-item>
                            </n-list>
                            <div id="btom">&nbsp;</div>
                            <div id="btom2">&nbsp;</div>
                            <div id="btom3">&nbsp;</div>
                        </n-layout-content>
                        <n-layout-footer bordered style="height: 210px; padding: 24px;">
                            <n-card>
                                <n-space vertical>
                                    <n-input type="textarea" placeholder="发表一句友善的讨论吧╰(*°▽°*)╯" v-model:value="msgText"
                                        style="height:80px" autosize></n-input>
                                    <n-space justify="end">
                                        <n-button @click="handleClear">清空</n-button>
                                        <n-button type="primary" @click="handleSend">发送</n-button>
                                    </n-space>
                                </n-space>
                            </n-card>
                        </n-layout-footer>
                    </n-layout>
                    <!-- 折叠栏 -->
                    <n-layout-sider content-style="padding: 24px;" :width="300" :native-scrollbar="false" bordered
                        collapse-mode="width" show-trigger="arrow-circle" :collapsed-width="10">
                        <n-tabs default-value="history" justify-content="space-evenly" type="line">
                            <n-tab-pane name="history" tab="历史记录">
                            </n-tab-pane>
                        </n-tabs>
                        <n-list hoverable clickable>
                            <n-list-item class="bg-gray-100 my-1 rounded" v-for="historyDiscuss in discussDetail.discussHisroy">
                                <n-thing title="" content-style="margin-top: 10px;">
                                    <template #description>
                                        <n-space justify="space-between" class=" px-2">
                                            <n-text class=" font-bold">{{historyDiscuss.SID}}</n-text>
                                            <n-text>{{historyDiscuss.updateTime}}</n-text>
                                        </n-space>
                                    </template>
                                    <n-text class=" px-2">
                                        {{historyDiscuss.content}}
                                    </n-text>
                                </n-thing>
                            </n-list-item>
                        </n-list>
                    </n-layout-sider>
                </n-layout>
            </n-card>
        </n-gi>
    </n-grid>

</template>

<script lang="ts" setup>
import { createStorage } from '@/utils/Storage';
import { useMessage } from 'naive-ui';
import { ref ,onMounted} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {getDiscussDetail} from '@/api/student/discuss';

const route = useRoute();
const router = useRouter();

const msgText = ref("");
const conversationList: any = ref([]);
const Storage = createStorage({ storage: localStorage });

const discussDetail:any = ref({});

const ws = new WebSocket('ws://localhost:23567');

onMounted(
    async ()=>{
        discussDetail.value = await getDiscussDetail({discussID: route.params.discussID});
        console.log(discussDetail.value);
    }
)

ws.onopen = () => {
    ws.send(JSON.stringify({
        Authorization: Storage.get("ACCESS-TOKEN", ''),
        discussID: route.params.discussID,
        type: 'conn',
    }))
}

const message = useMessage();

ws.onmessage = (e) => {
    // recive.value = e.data;
    console.log(e.data);
    let result = JSON.parse(e.data);
    if (result.type == 'message')
        conversationList.value.push(result.msg);
    else {

        if (result.status == 'success') {
            message.success(result.msg);
        } else {
            message.error(result.msg);
        }
    }
    document.getElementById('btom')?.scrollIntoView()
}

const handleBack = () => {
    // message.info('我，回去了吗？');
    router.go(-1);
}

const handleSend = () => {

    ws.send(JSON.stringify({
        Authorization: Storage.get("ACCESS-TOKEN", ''),
        msg: msgText.value,
        type: 'msg'
    }));
    msgText.value = "";
}

const handleClear = () => {
    msgText.value = "";
}

</script>

<style lang="less">
.ql-toolbar.ql-snow {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #eee;
    margin-top: -10px;
}

.ql-container.ql-snow {
    border: none;
}

.chatBox {
    float: left;
    width: 75%;
    height: 100%;
    padding-right: 16px;
}

.chatHistory {
    float: right;
    padding: 10px;
    height: 100%;
    width: 25%;
    border-radius: 5px;
    background-color: #fff;
}

.talk {
    float: left;
    margin: 0 10px;
    padding: 5px;
    border-radius: 5px;
    background-color: #fff;
}

.mytalk {
    float: right;
    margin: 0 10px;
    padding: 5px;
    border-radius: 5px;
    background-color: #fff;
}
</style>
